<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <title>Kubernetes Flink</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/lib/xadmin/fonts/font.css">
    <link rel="stylesheet" href="/static/lib/xadmin/xadmin.css">
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <script src="/static/lib/jquery.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/lib/xadmin/xadmin.js"></script>
    <style>
        table{text-align:center;}
        .table-from{padding-bottom: 5px;float: left;padding-left: 14px;}
        .table-report{padding-bottom: 0px;float: right;padding-right: 0px;background: #fff;border: 1px solid #d7d7d7;margin-right: 10px;height: 36px;}
        .layui-card-body{position:relative;padding:15px 0;line-height:24px}
        .table-data-rep{width:385px;height:36px;text-align:left;display:table-cell;vertical-align:middle;padding-left:10px;margin-left:10px;position: relative; top: -19px;}
        .layui-fluid{position:relative;margin:0 auto;padding:0 10px}
        .rep-title{position:relative;right:1px;top:-21px;text-align:center;color:#9f9fa1;border:.5px solid #c5c5c5;border-bottom:0;width:175px}
    </style>
</head>
<body>

    <div class="layui-fluid">
        <div style="padding: 10px;padding-top: 15px;">
            <div class="layui-card-body" style="background: #fff;margin-left: -7.5px;margin-right: -7.5px;padding-left: 20px;">
                <div class="layui-form layui-col-space5 layui-form-pane">
                    <div class="layui-input-inline layui-show-xs-block">
                        <input type="text" id="route_id" placeholder="项目名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline layui-show-xs-block">
                        <select id="job_manager_status">
                            <option value="">请选择JobManager状态</option>
                            <option value="Running">Running</option>
                            <option value="Pending">Pending</option>
                            <option value="未知">未知</option>
                        </select>
                    </div>
                    <div class="layui-input-inline layui-show-xs-block">
                        <select id="task_manager_status">
                            <option value="">请选择TaskManager状态</option>
                            <option value="Running">Running</option>
                            <option value="Pending">Pending</option>
                            <option value="未知">未知</option>
                        </select>
                    </div>
                    <div class="layui-input-inline layui-show-xs-block">
                        <button class="layui-btn" onclick="list_table()">
                            搜索
                        </button>
                    </div>
                </div>
            </div>
            <div class="table-from" style="background: #fff;">
                <button class="layui-btn" onclick="save_project()">新增项目</button>
                <button class="layui-btn layui-btn-normal" onclick="route_cache()">路由缓存</button>
                <button type="reset" class="layui-btn layui-btn-primary" onclick="list_table()">重新加载</button>
            </div>

            <div class="table-report">
                <div class="rep-title">服务状态统计，所有数据</div>
                <div class="table-data-rep">
                    <span>JobManager：</span>
                    <button class="layui-btn layui-btn-xs layui-btn-normal">Running <span class="layui-badge layui-bg-gray" id="jobManagerRunning"></span></button>
                    <button class="layui-btn layui-btn-xs layui-btn-warm">Pending <span class="layui-badge layui-bg-gray" id="jobManagerPending"></span></button>
                    <button class="layui-btn layui-btn-xs layui-btn-danger">未知 <span class="layui-badge layui-bg-gray" id="jobManagerUnknown"></span></button>
                </div>
                <div class="table-data-rep">
                    <span>TaskManager：</span>
                    <button class="layui-btn layui-btn-xs layui-btn-normal">Running <span class="layui-badge layui-bg-gray" id="taskManagerRunning"></span></button>
                    <button class="layui-btn layui-btn-xs layui-btn-warm">Pending <span class="layui-badge layui-bg-gray" id="taskManagerPending"></span></button>
                    <button class="layui-btn layui-btn-xs layui-btn-danger">未知 <span class="layui-badge layui-bg-gray" id="taskManagerUnknown"></span></button>
                </div>
            </div>

            <div class="layui-row layui-col-space15" style="background: #fff;">
                <div class="layui-col-md12" style="padding: 20px;padding-top: 10px;">
                    <div class="layui-card">
                        <div class="layui-card-body layui-table-body layui-table-main" style="padding: 0;">
                            <table class="layui-table" style="margin: 0;">
                                <thead>
                                  <tr>
                                    <th style="text-align: center; width: 50px;">序号</th>
                                    <th style="text-align: center;">项目</th>
                                    <th style="text-align: center;">简介</th>
                                    <th style="text-align: center; width: 50px;">需求</th>
                                    <th style="text-align: center; width: 90px;">JobManager</th>
                                    <th style="text-align: center; width: 90px;">TaskManager</th>
                                    <th style="text-align: center; width: 70px;">状态</th>
                                    <th style="text-align: center; width: 70px;">告警</th>
                                    <th style="text-align: center; width: 100px;">负责人</th>
                                    <th style="text-align: center; width: 220px;">操作</th>
                                  </tr>
                                </thead>
                                <tbody id="table_data">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/static/lib/cookie.js"></script>
<script type="text/javascript" src="/static/js/flink-service-list.js"></script>
</html>
